<template>
  <div class="views" id="views">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import { App } from '@/assets/App/App'

const app = new App()
export default {
  data () {
    return {
      params: {
        methods: {
          animation: true, // 循环调用渲染
          renderer: true, // 应用渲染器
          light: true, // 在场景中加入全景光
          TWEEN: true, // 应用相机飞行方法
          controls: true, // 使用轨道控制器，鼠标滚轮控制放大缩小，左键拖动绕中心点旋转，右键拖动中心点。
          statement: true // 在控制台打印声明，与本案例无关，可忽略。
        },
        events: {
          windowResize: true // 监听窗口尺寸变化，并改变渲染页面尺寸
        },
        params: {
          container: null, // 渲染结果输出dom页面
          renderer: [
            'WebGLRenderer'
          ],
          controls: [
            'OrbitControls'
          ],
          rendererParams: {
            antialias: true // 抗锯齿，可忽略。
          }
        }
      }
    }
  },
  mounted () {
    this.params.params.container = document.getElementById('container') // 获取渲染结果输出dom页面
    /**
     * 初始化场景
     */
    app.init(this.params, (scene, camera, renderer) => {
      camera.position.set(0, 0, -2000) // 修改相机位置
    })
    /**
     * 导入模型
     */
    app.addModel({
      url: 'static/model/fbx/cqcet/15/实训楼.FBX', // 模型地址
      type: 'fbx' // 模型格式
    }, () => { // 加载完成回调，可忽略。
      console.log('模型加载完成')

      this.addFlyTo()
    })
  },
  methods: {
    /**
     * 添加相机飞行
     */
    addFlyTo (count) {
      count = count || 0
      var option = {
        position: [100, 100, -100], // 相机新的位置
        controls: [0, 0, 0], // 控制器新的中心点位置
        duration: 3000, // 飞行时间
        start: () => {
          console.log('飞行开始了')
        },
        update: () => {
          console.log('正在飞行中')
        },
        done: () => {
          console.log('飞行结束了')
          this.addFlyTo(count + 1) // 飞行结束后回调下一次飞行
        },
        stop: () => {
          console.log('飞行停止了')
        }
      }

      switch (count % 6) {
        case 0:
          option.position = [0, 500, 0]
          break
        case 1:
          option.position = [2000, 0, 0]
          break
        case 2:
          option.position = [0, 0, 500]
          break
        case 3:
          option.position = [-2000, 0, 0]
          break
        case 4:
          option.position = [0, -500, 0]
          break
        case 5:
          option.position = [0, 0, -2000]
          break
      }
      app.flyTo(option)
    }
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
